<!--
 * @Author: krsea 965837746@qq.com
 * @Date: 2025-03-03 15:35:20
 * @LastEditors: krsea 965837746@qq.com
 * @LastEditTime: 2025-03-03 16:02:38
 * @FilePath: \vue3-code\2305\week3\4商品展示两个组件bootstrap.html
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品展示两个组件</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 vue.js -->
    <script src="../js/vue.js"></script>
  </head>

  <body>
    <!-- div id 为 app 挂载点 -->
    <div id="app">
        <div class="container">
            <h2 class="text-center">商品列表</h2>
            <!-- 使用商品列表组件 -->
            <product-list :products="products"></product-list>
        </div>
    </div>

    <!-- 定义商品列表组件模板 -->
    <template id="product-list-template">
      <div class="row">
        <!-- 使用商品项组件 -->
        <product-item
          v-for="(product, index) in products"
          :product="product"
          :key="index">
        </product-item>
        
      </div>
    </template>

    <!-- 定义商品项组件模板 -->
    <template id="product-item-template">
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h3 class="card-title">{{ product.name }}</h3>
            <p class="card-text">价格: ${{ product.price }}</p>
            <p class="card-text">描述: {{ product.description }}</p>
          </div>
        </div>
      </div>
    </template>

    <!-- 使用 javascript 脚本 -->
    <script type="text/javascript">
      // 定义商品项组件
      Vue.component("product-item", {
        // ... 选项 ...
        props: ["product"], // 接收一个对象类型的 prop
        template: "#product-item-template",
      });

      // 定义商品列表组件
      Vue.component("product-list", {
        props: ["products"],
        template: "#product-list-template",
      });

      // 创建 Vue 实例
      new Vue({
        el: "#app",
        data: {
          // 商品列表数据
          products: [
            {
              name: "iPhone 15",
              price: 999,
              description: "最新款苹果手机，性能强劲",
            },
            {
              name: "MacBook Pro",
              price: 1999,
              description: "高性能笔记本电脑，适合专业人士",
            },
            {
              name: "Apple Watch",
              price: 399,
              description: "智能手表，具备多种健康监测功能",
            },
          ],
        },
      });
    </script>
  </body>
</html>
